<template>
	<view>
		<view class="errortext" ><text v-if="errortext != ''">{{ errortext }}</text></view>
		<view id="show-content"  :class="openCamera == true?'':'show-content-hide'">
			 <view class="home">
		 		<view :class="bgImgClass ">
					<img   src="../../static/neuralNets/img4.png" /> 
				</view> 
			</view>	
			<view class="uer-camera" @tap="changeUserCamera('hou')" v-if="useCamera == 'qian'">
				<img src="../../static/neuralNets/change_camera.png" /> 
			</view>
			<view class="uer-camera" @tap="changeUserCamera('qian')" v-if="useCamera == 'hou'">
				<img src="../../static/neuralNets/change_camera.png" /> 
			</view>
<!-- 			<video src="" id="video" 
				:style="{ width: vwidth + 'px',height: vheight + 'px', display:showVideo}"
				playsinline
				webkit-playsinline
				autoplay = true
				muted = true
				loop = true
				controls = false
				show-center-play-btn = false 
				object-fit = fill
			></video> -->
			 <h5-face ref="h5Face" v-model:errorText="errortext" 
				@status="statusChange"
				@start="onStart"
				@success="onSuccess"
				@error="onError"
				@image="onImage"
			>
			 </h5-face>
		</view>
		
		
			<view class="main_bottom">
					确认为<text style="color: red;padding: 6rpx;" v-if="showUserName">{{showUserName}}</text>本人照片<br>保持正脸在取景框中根据屏幕指示完成
					<view class="bottom_main">
						<view class="bottom_main_list">
							<img src="../../static/neuralNets/img3.png" /><p>正对手机</p>
						</view>
						<view class="bottom_main_list">
							<img src="../../static/neuralNets/img2.png" /><p>光线充足</p>
						</view>
						<view class="bottom_main_list">
							<img src="../../static/neuralNets/img1.png" /><p>脸无遮挡</p>
						</view>
					</view>
			</view>
			
			<!--  <button class="main_button">正在检测···</button> -->
			<view class="button-view" :style="{ display:(openCamera == true?'flex':'none')}">
				<view class="click-button"  v-if="startVideoStatus == false">
					<view class="button-btn button-btn2"  style="background-color: #0b4da2;" @tap.bind="startVideo">同意协议，开始拍摄</view>
				</view>
			</view>
	</view> 
</template>
<script>
	//import Upload from "@/utils/fileupload/upload.js";
	//import * as jquery from "@/static/collect_face/jquery2.3.js";
	//import faceFilter from "@/static/neuralNets/jeelizFaceFilter.module.js"; 
	//import JeelizCanvas2DHelper from "@/static/neuralNets/JeelizCanvas2DHelper.js";
	// 引入uni.webview.1.5.2.js
	//import '@/static/js/uni.webview.1.5.4.js'
	//let VIDEOELEMENT = null;
	//var  CVD = null; // return of Canvas2DDisplay
	
	//console.log(faceFilter.JEELIZFACEFILTERGEN)
	//let faceFilter = aa.JEELIZFACEFILTERGEN()
	//console.log(faceFilter)
	import h5Face from '@/components/h5-face'
	
	export default {
		components:{
			h5Face
		},
		data() {
			return {
				isTest:false,
				showUserName:'',
				openCamera:false,
				startVideoStatus:false,
				errortext:'点击同意按钮开始拍摄' 
				// vwidth:240,
				// vheight:240,
				// errortext:'点击同意按钮开始拍摄',
				// imgUrl:'',
				
				// pauseStatus:false,
				// startCut:false,
				// faceCoo:null,
				// detectState:null,
				// showVideo:'block',
				// appendCss:false,
				// bgImgClass:'home_wai',
				// bgImgClass2:'home_nei',
				// mediaStreamTrack:null,
				// useCamera:'qian', //qian代表前置摄像头 hou代表后置摄像头
			}
		},
		onLoad(params) {
			if(params.username)
			{
				this.showUserName = params.username;
			}
			
			var that = this;//a
			setTimeout(function(){
				if(that.isTest == true)
				{ 
					//是否是测试环境 测试环境直接调用视频
					that.openCamera = true;
					that.main();
				}else{
					that.openCamera = true;
					that.bgImgClass = 'home_wai remove_animation';
					that.bgImgClass2 = 'home_nei remove_animation';
					that.errortext = '点击同意按钮开始拍摄';
				}
			},100)
		}, 
		onUnload(){
			// this.closeVideo();
		},
		methods: {
		statusChange(status){
			console.log(status)
			if(status == false)
			{
				this.startCut = false;
				this.bgImgClass = 'home_wai';
				this.bgImgClass2 = 'home_nei';
			}
		},
		onStart(){ //开始拍照
			this.bgImgClass = 'home_wai';
			this.bgImgClass2 = 'home_nei';
		},
		onSuccess(){ //拍照成功
			this.bgImgClass = 'home_wai remove_animation';
			this.bgImgClass2 = 'home_nei remove_animation';
		},
		onError(){ //开启失败
			this.bgImgClass = 'home_wai remove_animation';
			this.bgImgClass2 = 'home_nei remove_animation';
		},
		onImage(imageUrl){
			console.log(imageUrl);
		},
		startVideo(){
			console.log('START')
			if(this.startVideoStatus == false)
			{
				this.$refs.h5Face.playVideo();
				//faceFilter.toggle_pause(false); //取消暂停
			}else{
				if(this.pauseStatus == false)
				{
					this.$api.msg('当前正在拍照');
					return;
				}
				this.$refs.savePause(false)
			}
		},
			async faceOpeImg(){
				var that = this;
				uni.webView.postMessage({
					data: {
						photo: this.imgUrl
					}
				});
			
				return;
				var checkFace = await that.$commonApi.checkUserFace(2,that.imgUrl);
				//检测人脸结果
				if(checkFace == false)
				{
					that.errortext = '不是有效的人脸，请重新拍照';
					that.startVideoStatus = false;
					return ; //如果不是正确的人脸
				}
				if(checkFace.face_list && checkFace.face_list.length > 0)
				{
					var checkFaceInfo = checkFace.face_list[0];
					//console.log(checkFaceInfo)
					var qualityInfo = checkFaceInfo.quality;
					if(qualityInfo)
					{
						var allowNum = 0.3;
						if(qualityInfo.blur && qualityInfo.blur >= allowNum)
						{
							that.errortext = '人脸过于模糊，请重新拍摄';
							//that.$api.msg('人脸过于模糊，请重新拍摄',3000);
							return ;
						}
						var checkArrObj = {
							chin_contour:'下巴',
							left_cheek:'左脸',
							left_eye:'左眼',
							mouth:'嘴巴',
							nose:'鼻子',
							right_cheek:'右脸',
							right_eye:'右眼'
						};
						var occlusionInfo = qualityInfo.occlusion;
						for(var key in checkArrObj)
						{
							if(key == 'nose')
							{
								var allowNum = 0.2;
							}else{
								var allowNum = 0.3;
							}
							if(occlusionInfo[key] && occlusionInfo[key] >= allowNum)
							{
								//that.errortext = '请不要遮挡脸部';
								that.errortext = '请漏出完整的'+checkArrObj[key];
								that.startVideoStatus = false;
								//that.$api.msg('请漏出完整的'+checkArrObj[key],3000);
								return ;
							}
						}
						that.errortext = '人脸识别成功，正在上传保存';
						that.uplodImg();
					}
				}else{
					that.errortext = '比对人脸失败';
					that.startVideoStatus = false;
					return ; //如果不是正确的人脸
				}
			},
			async uplodImg(){
				var that = this;
				var imgRes = await Upload.uploadFileToQiniu([
					{
						path:that.imgUrl
					}
				],200);
				uni.hideLoading();
				if(imgRes.list && imgRes.list.length > 0)
				{
					var headimg = imgRes.list[0]; 
				}else{
					var headimg = '';
				}
				
				if(headimg)
				{
					that.errortext = '上传图片成功';
					uni.showModal({
						title:'上传地址'+headimg
					})
					//that.$api.jeelizSetImg(headimg);
					
				}else{
					that.errortext = '上传图片失败';
					that.startVideoStatus = false;
				}
			},
			
		}
	}
	
</script>

<style lang="scss">
	page{
		background-color: #F6F6F6;
	}
.contentp1{
	width: 100px;
	height: 30px;
	background: #EEEEEE;
	color: #28A745;
	line-height: 30px;
	margin-top: 30px;
	text-align: center;
}
.contentp{
	height: 120px;
}
.errortext{
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	//color: #e03030;
	color: #333333;
	text-align: center;
	margin-top: 60rpx;
	font-size: 30rpx;
}
.img-face{
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	  display: -moz-box; /* 老版本语法: Firefox (buggy) */
	  display: -ms-flexbox; /* 混合版本语法: IE 10 */
	
	  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	 display: flex;
	 
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 .imgurl{
		 /* position: fixed;
		 top: 117.5px;
		 width: 266px;
		 height: 266px;
		 border-radius: 230rpx; */
	 }
}
#show-content{
	width: 100%;
	margin-top:50px;
	height: 260px;
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	  display: -moz-box; /* 老版本语法: Firefox (buggy) */
	  display: -ms-flexbox; /* 混合版本语法: IE 10 */
	
	  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
	justify-content: center;
	align-items: center;
}
.show-content-hide{
	display: none !important;
}
.button-view{
	width: 100%;
	margin-top:100rpx;
	height: 80rpx;
	display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
	  display: -moz-box; /* 老版本语法: Firefox (buggy) */
	  display: -ms-flexbox; /* 混合版本语法: IE 10 */
	
	  display: -webkit-flex; /* 新版本语法: Chrome 21+ */
	display: flex;
	justify-content: center;
	align-items: center;
	.click-button{
		width: 90%;
		height: 100%;
		.button-btn{
			border-radius:20rpx ;
			width: 80%;
			margin-left: 10%;
			text-align: center;
			height: 100%;
			line-height: 80rpx;
			font-size: 28rpx;
			color: rgb(229, 81, 29);
			    border-color: rgb(240, 202, 182);
			    background: rgb(255, 228, 208);
		}
		.button-btn2{
			    color: rgb(255, 255, 255);
			    border-color: rgb(255, 68, 0);
			    background: rgb(255, 68, 0);
		}
	}
}

.not-zhuanimg{
	width:17.225rem; overflow: hidden; z-index: 10;position: absolute;
}
.home{overflow: hidden; text-align: center;  width: 240px;height: 240px; position: absolute;z-index: 10;}
//.home_wai{overflow: hidden; width: 100%; position: absolute; top: 0; left: 0; right: 0;}
.home_wai img{width:100%; overflow: hidden;  animation: myfirst 8s infinite linear;}
@keyframes myfirst{
	0%{
		transform: rotate(0deg) scale(1);
	}
	50%{
		transform: rotate(360deg) scale(1);
	}
	75%{
		transform: rotate(540deg) scale(0.9);
	}
	100%{
		transform: rotate(720deg) scale(1);
	}
}

.home_nei{    
	   overflow: hidden;
	       width: 12.575rem;
	       margin: 3.69133rem auto;
}
.home_nei img{width: 100%; overflow: hidden; animation: mysecond 8s infinite linear;}

.remove_animation img{animation:none;}

@keyframes mysecond{
	0%{
		transform: rotate(0deg) scale(1);
	}
	50%{
		transform: rotate(-360deg) scale(1);
	}
	75%{
		transform: rotate(-540deg) scale(0.9);
	}
	100%{
		transform: rotate(-720deg) scale(1);
	}
}
.main_top{padding-top: 2.5rem; text-align: center; color: #757575; font-size: 0.9rem; font-weight: bold;}
.main_top_cricle{ margin: 1.25rem auto; width:9.2rem; height: 9.2rem; position: relative; overflow: hidden;}
.main_top_cricle img{width:98%;}
.main_cricle{position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 5; animation: myfirst 4s infinite linear;}
@keyframes myfirst{
	0%{
		transform: rotate(0deg);
	}
	50%{
		transform: rotate(360deg);
	}
	75%{
		transform: rotate(540deg);
	}
	100%{
		transform: rotate(720deg);
	}
}

.main_cricle img{width: 100%; height: 100%;}
.main_bottom{margin-top: 1rem; overflow: hidden; text-align: center; font-size: 1rem; color: #9e9e9e;}

.title{background: #FFFFFF; padding: 0.9rem 0; text-align: center; box-shadow: 0 0 10px #e5e5e5; font-size: 0.9rem; font-weight: bold; color:#000;}

.bottom_main{margin-top: 1rem; display: flex; overflow: hidden;}
.bottom_main_list{text-align: center; flex-grow: 1;  font-size:1rem; color: #535353;}
.bottom_main_list img{width: 2.5rem; margin-bottom: 0.4rem;}
.main_button{margin: 1rem; height: 2.2rem; line-height: 2.2rem; background: #0b4da2; display: block; text-align: center; color: #FFFFFF; font-weight: bold; font-size: 0.9rem; border: 0; width: calc(100% - 2rem);}

.uer-camera{
	    position: fixed;
	    top: 200rpx;
	    right: 42%;
	    color: #fff;
	    text-align: center;
	    font-size: 24rpx;
	    padding: 6rpx 8rpx 8rpx 6rpx;
	    border-radius: 24rpx;
	    height: 88rpx;
	    width: 88rpx;
		overflow: hidden;
}
.uer-camera img{
	width: 100%;
	height: 100%;
}
</style>
